<template>
    <div class="song">
        <div class="w1200">
           <div class="song-aside">
              <div class="song-img">
                     <div class="stylus" :class=" isPlayed?'stylusplay':'unstyus'">
                        <img src="@/assets/stylus.png">
                        </div>  
                 <el-image :src="curSong.album.picUrl"></el-image>
              </div>
              <div class="song-simi-info">
                 <h3>相似歌曲</h3>
                 <ul class="infolist">
                    <li class="infoitem" v-for="(item,index) in simiSongList" :key="item.id+''+index">
                       <div class="infoitem-left">
                          <h5>{{item.name}}</h5>
                          <span>{{item.singer[0].name}}</span>
                       </div>
                       <div class="infoitem-right">
                          <i @click="playSimiSong(item)" class="el-icon-caret-right"></i>
                       </div>
                    </li>
                 </ul>
              </div>
           </div>
           <div class="song-main">
            <div class="song-name">
               <h3>{{curSong.name}} <router-link v-if="curSong.mvId" :to="{name:'Mv',query:{id:curSong.mvId}}"><i class="el-icon-video-camera"></i></router-link></h3>
               <h4>{{curSong.singer[0].name}}</h4>
               <div class="album-info">
                  <span>专辑：<router-link class="co3" :to="{name:'Album',query:{id:curSong.album.id}}">{{curSong.name}}</router-link></span>
                  <span>发行时间: <em class="co3">{{curSong.publishTime}}</em></span>
               </div>
               <div class="play-collect">
              <div class="btn" @click="immediately" ><i :class="[isPlayed&&curSongInfo.id===curSong.id?'el-icon-video-pause':'el-icon-caret-right']"></i>立即播放</div>
              <div class="btn collect">
                <i class="el-icon-star-off"></i>收藏
              </div>
              <div class="btn collect">
                <i class="el-icon-chat-dot-round"></i>评论
              </div>
            </div>
            </div>
                  <div class="lyrics">
                     <lyrics :songId="songId" currentPage="songPage"></lyrics>
                  </div>
                  <div class="comment-song">
                     <comments :type="0" :comment_params="song_CommentParams"></comments>
                  </div>
           </div>
        </div>
    </div>
</template>
<script>
import {mapGetters,mapMutations,mapActions}from 'vuex'
import Lyrics from'@/components/common/Lyrics.vue'
import Comments from '@/components/common/Comments.vue'
import { formatSongInfo } from '@/utils/songs'
// import {formatSongInfo}from '@/utils/songs'
export default {
   components:{
      Lyrics,
      Comments
   },
   data() {
      return {
         isready:false,
         simiSongList:[],
         curSong:{}, 
         songId:'',
      song_CommentParams: {
        id: this.$route.query.id,
        limit: 20,
        offset: 0,
        before: 0,
      },
      }
   },
   async created(){
      const id= this.$route.query.id;
      await this.init(id);
   },
   watch:{
      $route:{
         deep:true,
         handler(newVal){
            this.init(newVal.query.id)
         }
      }
   },
   computed:{
      ...mapGetters(['curSongInfo','isPlayed','playIndex','playList']),
   },
   methods:{
      async init(newId){
         this.songId=newId;
         this.song_CommentParams.id=newId;
         await this.getSongDetail(newId);
         await this.getSimiSong(newId);
      },
      ...mapMutations(['setIsPlayed','setPlayIndex','setPlayList']),
      ...mapActions(['selectPlay']),

      async getSongDetail(id){
          const res= await this.$api.getSongDetail(id);
          this.curSong=formatSongInfo(res.songs[0])
         // console.log(res)
      },
      async getSimiSong(id){
         const res= await this.$api.getSimiSong(id);
         // console.log(res)
        this.simiSongList= res.songs.map((item)=>{
               return{
                  id:String(item.id),
                  album:item.album,
                  singer:item.artists,
                  vip:item.fee===1,
                  url: `https://music.163.com/song/media/outer/url?id=${item.id}.mp3`,
                  name:item.name,
                  mvid:item.mvid,
                  duration:this.$util.handleSongTime(item.duration),    
               }
         })
      },
      immediately(){
         if(this.isPlayed&&this.curSongInfo.id===this.curSong.id){
            this.setIsPlayed(false)
         }else{
            this.selectPlay({list:[this.curSong]})
         }
      },
      playSimiSong(item){
         if(item.id===this.curSong.id&&this.isPlayed===true){
            this.setIsPlayed(false)
            return
         }
        this.selectPlay({list:[item]});
         this.$router.push({name:'Song',query:{id:item.id}})
         // this.setIsPlayed(true);
         
      }
   },
}
</script>
<style lang="less" scoped>
.w1200{
   width: 1200px;
   // min-height: 620px;
   margin: 24px auto;
   margin-bottom: 60px;
}
.song-aside{
   width: 310px;
   // height: 610px;
   // border: 1px solid #ccc;
   position: fixed;
}
.song-img{
   width: 310px;
   height: 270px;
   position: relative;
   background-image: url('../../assets/disc.png');
   background-repeat: no-repeat;
   background-size: contain;
   cursor: pointer;
   .stylus{
      position: absolute;
      right: 40px;
      top: 0;
      transform-origin: 23px 5px;
      transition: all .4s;
   }
   .stylusplay{
      transform: rotateZ(0);
         }
   .unstyus{
         transform: rotateZ(-30deg);
      }
   .el-image{
      width: 190px;
      height: 190px;
      position: absolute;
      left: 40px;
      top: 40px;
      border-radius: 100%;

   }
}
.song-simi-info{
   width: 310px;
   // min-height: 200px;
   // border-top: 1px solid #ccc;
   h3{
      height: 30px;
      font-size: 14px;
      padding: 10px 0 10px 5px;
      margin-bottom: 10px;
   }
   .infolist{
      .infoitem{
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 8px;
         width: 310px;
         height: 54px;
         // border: 1px solid #ccc;
         border-bottom: 1px solid #f4f4f4;
         h5{
            padding-bottom: 6px;
            color: #333;
            font-size: 12px;
            cursor: pointer;
            // font-family:PingFang SC,Arial,Microsoft YaHei,sans-serif;
         }
         span{
            color: #999;
            font-size: 12px;
            cursor: pointer;
         }
         i{
            line-height: 54px;
            color: #999;
            font-size: 16px;
            cursor: pointer;
         }
      }
   }
}

.song-main{
   width: 800px;
   min-height: 510px;
   margin-left: 370px;
   cursor: pointer;
   .song-name{
      h3{
         font-size: 30px;
         color: #333;
         margin-bottom: 10px;
         i{
            margin-left: 10px;
            font-size: 25px;
            color: #ff641e;
         }
      }
      h4{
         color: #666;
         font-size: 18px;
      }
      .album-info{
         padding-top: 10px;
         span{
            color: #999;
            font-size: 14px;
            margin-right: 20px;
         }
         .co3{
            color: #333;
            font-style: normal;
            font-family: PingFang SC,Arial,Microsoft YaHei,sans-serif;
            // cursor: pointer;
         }
      }
      .play-collect {
            // padding-left: 20px;
            margin-top: 30px;
            display: flex;
            .btn {
              width: 105px;
              height: 30px;
              border-radius: 50px;
              background-color: #ff641e;
              color: #fff;
              cursor: pointer;
              text-align: center;
              line-height: 30px;
              padding-left: 18px;
              position: relative;
              i {
                position: absolute;
                font-size: 20px;
                left: 12px;
                top: 4px;

              }
            }
            .collect {
              background-color: #f0f0f0;
              color: #333;
              margin-left: 15px;
              width: 80px;
              i {
                font-size: 15px;
                top: 7px;
               //  padding-left: 15px;
              }
            }
          }
   }
}

</style>
